<template>
  <div class="count">
    <h1>{{count}}</h1>
    <p>{{name}}--{{person}}--{{id}}</p>
    <button @click="add(num)">累加</button>
  </div>
</template>

<script>
export default {
    name:"Count",
    props:['num','name','person','id'], //组件中专门有个props配置项 接收父组件中传递过来的参数 props为一个数组 数组的每一项为父组件中传递过来的值得属性名
    data(){
        return{
            count:0,
            
        }
        
    },
    methods:{
        add(num){
            this.count+=num
        }
    }
}
</script>

<style>
.count{
    height: 200px;
    background-color: pink;
    text-align: center;
}
</style>